import React from 'react';
import ReduxVisualizer from './ReduxVisualizer';
import './ReduxVisualizer.css';
import './ReduxVisualizerPage.css';

const ReduxVisualizerPage: React.FC = () => {
  return (
    <div className="redux-visualizer-page">
      <div className="page-header">
        <h1>Redux 原理可视化教学工具</h1>
        <p className="subtitle">探索 Redux 核心机制的工作原理</p>
      </div>
      
      <div className="page-content">
        <div className="introduction">
          <h2>欢迎使用 Redux 原理可视化工具</h2>
          <p>
            这个工具旨在帮助开发者深入理解 Redux 的底层实现原理，包括状态管理流程、单向数据流和中间件工作机制。
            通过这个交互式工具，您可以直观地观察 Redux 中的数据流动和状态变化。
          </p>
          
          <div className="key-features">
            <h3>核心功能</h3>
            <ul>
              <li><strong>实时状态展示</strong>：观察 Redux store 中的状态变化</li>
              <li><strong>Action 分发跟踪</strong>：查看每一个 Action 的分发历史</li>
              <li><strong>中间件工作机制</strong>：体验中间件如何拦截和处理 Actions</li>
              <li><strong>单向数据流可视化</strong>：直观理解数据在 Redux 中的流动路径</li>
              <li><strong>自定义 Redux 实现</strong>：对比原生 Redux 和简化版实现的区别</li>
            </ul>
          </div>
        </div>
        
        {/* Redux 可视化工具主体 */}
        <ReduxVisualizer />
        
        <div className="learning-resources">
          <h3>学习资源</h3>
          <div className="resource-item">
            <h4>Redux 核心概念回顾</h4>
            <p>
              Redux 是一个用于 JavaScript 应用的状态管理库，它帮助开发者管理应用的状态，并提供可预测的状态更新。
              Redux 基于 Flux 架构，但进行了简化和改进，主要由 Action、Reducer 和 Store 三个核心部分组成。
            </p>
          </div>
          
          <div className="resource-item">
            <h4>实现细节</h4>
            <p>
              本工具中的简化版 Redux 实现位于 <code>simpleRedux.ts</code> 文件中，包含了 createStore 和 applyMiddleware 等核心函数。
              通过对比原生 Redux 和简化版实现，您可以更深入地理解 Redux 的内部工作原理。
            </p>
          </div>
        </div>
      </div>
      
      <div className="page-footer">
        <p>© 2023 Redux 学习工具 | 设计用于帮助开发者理解 Redux 底层原理</p>
      </div>
    </div>
  );
};

export default ReduxVisualizerPage;